<template>

  <div id="app">

    <MyHeader v-if="$route.path == '/'" />

    <!-- 缓存路由 -->
    <keep-alive>
      <!-- 需要缓存的 -->
      <router-view v-if="$route.meta.keep"></router-view>
    </keep-alive>

    <!-- 不需要路由缓存的 -->
    <router-view v-if="!$route.meta.keep"></router-view>


    <!-- 底部 -->
    <div class="footer">
      <van-tabbar v-model="active" active-color="#3399ff" inactive-color="black" v-if="$route.meta.isRoot">
        <van-tabbar-item replace to="/" icon="home-o">首页</van-tabbar-item>
        <van-tabbar-item replace to="publish" icon="add-o">发布</van-tabbar-item>
        <van-tabbar-item replace to="geren" icon="manager-o">我的</van-tabbar-item>
      </van-tabbar>
    </div>

  </div>
</template>

<script>
// 头
import MyHeader from './components/MyHeader.vue';

export default {
  beforeCreate() {
    
    //   两秒后跳转到首页
    setTimeout(() => {
      this.$router.push("cover");
    }, 100);
  },
  created() {

    //在页面刷新时将vuex里的信息保存到localStorage里

    window.addEventListener("beforeunload", () => {
      localStorage.setItem("messageStore", JSON.stringify(this.$store.state));
    });

    //在页面加载时读取localStorage里的状态信息

    localStorage.getItem("messageStore") &&
      this.$store.replaceState(
        Object.assign(
          this.$store.state,
          JSON.parse(localStorage.getItem("messageStore"))
        )
      );
  },
  components: {
    MyHeader,
  },
  data() {
    return {
      active: 0,
    };
  },
}
</script>

<style scoped>

nav {
  padding: 30px;
}

nav a {
  font-weight: bold;
  color: #2c3e50;
}

nav a.router-link-exact-active {
  color: #42b983;
}

</style>
